<template>
  <div class="wraper" ref="wraper">
    <fomCom :tableName='"projectArtboard"' @addFun='dataStorage' @tableGet='getData'>
      <!-- <div class="btnDiv"> -->
        <el-button type="primary" @click="dataUpdate()" >存储(覆盖之前的图表)</el-button>
        <el-button type="primary" @click="imgDraw()" >本地图片</el-button>
        <input type="file" accept="image/*" style="display:none" id="uploadfile" @change="uploadFile" />

        <!-- <el-button type="primary" @click="isDragStartCallback = !isDragStartCallback">{{isDragStartCallback?'锁定画布':'修改画布'}}</el-button> -->
      <!-- </div> -->
    </fomCom>

    <!-- <el-input v-model="tuName" placeholder="请输入图表存储名称（复杂点免得和别人冲突被覆盖掉了）"></el-input> -->
    
    <!-- <div class="btnDiv">
      <el-button type="primary" @click="getData">读档(写上之前图表名字)</el-button>
      <el-button type="primary" @click="dataStorage">上传(创建新的图表)</el-button>
      <el-button type="primary" @click="initData">新建画布</el-button>
    </div> -->

    <!-- 工具栏 -->
    <div class="controlPanel">
      
      <div 
        :class="[initIdx == idx ? 'contro-item active' : 'contro-item']" 
        v-for="(item,idx) in toolsArr" :key="idx"
        @click="handleTools(item, idx)"
        v-show="ifXianShi"
      >
        <i :class="'iconfont' + item.icon"></i>
      </div>
      <el-color-picker
          v-if="ifXianShi"
          class="pickerDiv"
          v-model="drawColor"
          show-alpha
          @change="fabricObj.freeDrawingBrush.color = drawColor"
          :predefine="predefineColors">
      </el-color-picker>

      <div  
        v-if="ifXianShi"
        class="contro-item canvasBtn" 
        @click="isDragStartCallback = !isDragStartCallback">
        {{isDragStartCallback?'画布锁定':'画布移动'}}
      </div>

      <div  
        v-if="ifXianShi"
        class="contro-item canvasBtn" 
        @click="updateCanvasSize">
        画布加大
      </div>

      <div 
        class="contro-item canvasBtn" 
        @click="ifXianShi = !ifXianShi">
        {{ifXianShi?'隐藏':'工具栏'}}
      </div>
    </div>

    <div class="canvasBox">
      <vue-draggable-resizable
        v-if="canvasBoxShow"
        :w="canvasSize"
        :h="canvasSize"
        :on-drag-start="onDragStartCallback"
        @resizestop="onResizeStop"
      >
      <!-- :parent="true"
        :debug="false"
        :min-width="500"
        :min-height="500"
        :isConflictCheck="true"
        :snap="true"
        :snapTolerance="20"
        v-on:dragging="onDrag" 
        v-on:resizing="onResize" -->
        <div class="canvas-wraper" 
          :class="{
            ifShow:isDragStartCallback
          }"
        >
          <canvas id="canvas" ref="canvas"></canvas>
        </div>
      </vue-draggable-resizable>
    </div>
    <div class="download">
      <el-button type="primary" :disabled="done" @click="downLoadImage">转换为图片并预览</el-button>
      <img :src="imageBase64" v-show="imageBase64!=''" alt="">
    </div>
  </div>
</template>
<script>
  import { fabric } from 'fabric'
  import Leancloud from '@/Leancloud'
  import fomCom from '@/components/fomCom'  // 引入模块
  import { config } from '@vue/test-utils'
  export default{
    components:{
      fomCom
    },
    data() {
      return{
        ifXianShi:false,
        canvasSize:500,
        attributesContent:{},
        isDragStartCallback:false,

        canvasBoxShow:true,

        // 图表Name
        tuName:'',
        // 当前状态
        isType:'',
        // 项目id
        objectId:'',
        currentTool: '',
        done: false,
        fabricObj: null,
        fabricObjID: null,
        initIdx: 0,
        toolsArr: [
          {
            name: 'pencil',
            icon: ' icon-pencil'
          },
          {
            name: 'line',
            icon: ' icon-line'
          },
          {
            name: 'arrow',
            icon: ' icon-arrow'
          },
          {
            name: 'dashedline',
            icon: ' icon-xuxian'
          },
          {
            name: 'text',
            icon: ' icon-ziti'
          },
          {
            name: 'rectangle',
            icon: ' icon-juxing'
          },
          {
            name: 'circle',
            icon: ' icon-yuanxing'
          },
          {
            name: 'ellipse',
            icon: ' icon-tuoyuanxing'
          },
          {
            name: 'equilateral', //三角形
            icon: ' icon-sanjiaoxing'
          },
          {
            name: 'xuanZhuan', //旋转
            icon: ' icon-xuanZhuan'
          },
          {
            name: 'remove',
            icon: ' icon-remove'
          },
          {
            name: 'undo',
            icon: ' icon-huitui'
          },
          {
            name: 'redo',
            icon: ' icon-xiangqian'
          },
          {
            name: 'reset',
            icon: ' icon-reset'
          },
        ],
        mouseFrom:{},
        mouseTo:{},
        moveCount: 1,
        doDrawing: false,
        fabricHistoryJson: [],
        mods: 0,
        drawingObject: null, //绘制对象
        // 画笔颜色
        drawColor: '#E34F51',
        predefineColors: [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577'
        ],
        drawWidth: 2,
        imageBase64: '',
        zoom: window.zoom ? window.zoom : 1,
        jsonData:{"version":"4.6.0","objects":[{"type":"rect","version":"4.6.0","originX":"left","originY":"top","left":206,"top":121,"width":204,"height":153,"fill":"rgba(255, 255, 255, 0)","stroke":"#E34F51","strokeWidth":2,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0},{"type":"rect","version":"4.6.0","originX":"left","originY":"top","left":325,"top":171,"width":120,"height":80,"fill":"rgba(255, 255, 255, 0)","stroke":"#E34F51","strokeWidth":2,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0},{"type":"rect","version":"4.6.0","originX":"left","originY":"top","left":542,"top":277,"width":90,"height":85,"fill":"rgba(255, 255, 255, 0)","stroke":"#E34F51","strokeWidth":2,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0},{"type":"rect","version":"4.6.0","originX":"left","originY":"top","left":63,"top":176,"width":720,"height":248,"fill":"rgba(255, 255, 255, 0)","stroke":"#E34F51","strokeWidth":2,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0}]}
      }
    },
    mounted() {
      //初始化canvas 
      this.initCanvas()
      // 数据初始化
      // this.showData(this.jsonData)
      // 旋转事件
      // this.xuanZhuan()
      setTimeout(() => {
        this.getData()
      }, 1000);
    },
    computed:{
      canvasWidth() {
        return window.innerWidth
      }
    },
    methods:{
      updateCanvasSize(){
        this.canvasSize = this.canvasSize * 1 + 100
        this.initCanvas()
      },
      onResizeStop(x, y, width, height){
        this.canvasSize = this.canvasSize == height ? width : height
        this.initCanvas()
      },
      imgDraw(){
        document.getElementById("uploadfile").click();
      },
      // 上传图片
      uploadFile(e){
          // this.canvas.isDrawingMode = false;
          // this.removeTextObject();
          var file = e.target.files[0];
          var reader = new FileReader();
          reader.onload = (e) => {
            var data = e.target.result;                    
            fabric.Image.fromURL(data, (img) => { 
                this.fabricObj.add(img).renderAll();
            });
          };
          reader.readAsDataURL(file);
          e.target.value='';
      },


      onDragStartCallback(){
        return this.isDragStartCallback
      },

      // 新建
      initData(){
        this.objectId = ''
        this.tuName = ''
        this.showData()
      },
      // 读取数据
      getData(value){
        let pageObj = {
          page:1,
          pageSize:1,
          openid:this.$store.getters.openid
        }
        if (value) {
          pageObj.objectId = value
        }
        Leancloud.dataRequest.getPage(pageObj,'projectArtboard').then((res)=> {
          console.log('查询到的数据',res)
          
          if (res.list[0]) {
            this.canvasSize = res.list[0].attributes.size || 500
            console.log(' tu canvasSize ',this.canvasSize)
            this.tuName = res.list[0].attributes.name
            this.objectId = res.list[0].id
            this.attributesContent = res.list[0].attributes.content
            this.initCanvas()
            this.showData(this.attributesContent)
          } else {
            this.$message('没有查到相关数据');
          }
        })
      },
      // 上传数据
      dataStorage(name){
        if (!(name || this.tuName)) {
            this.$message('请输入图表存储');
        } else {
          Leancloud.dataRequest.push({
            name:name || this.tuName || '测试',
            content:this.fabricHistoryJson[this.fabricHistoryJson.length - 1],
            openid:this.$store.getters.openid,
            size:this.canvasSize + '',
          },'projectArtboard',this).then(res=>{
            this.objectId = res.id
          })
        }
      },
      // 更改
      dataUpdate(){
        if (!this.fabricHistoryJson[this.fabricHistoryJson.length - 1]) {
            this.$message('没有数据');
        } else {
          Leancloud.dataRequest.update(this.objectId,{
            name:this.tuName || '测试2',
            content:this.fabricHistoryJson[this.fabricHistoryJson.length - 1],
            openid:this.$store.getters.openid,
            size:this.canvasSize + '',
          },'projectArtboard',this)
        }
      },
      initCanvas() {
        this.canvasBoxShow = false
        setTimeout(() => {
          this.canvasBoxShow = true
        }, 200);
        setTimeout(() => {

          this.fabricObj = new fabric.Canvas('canvas',{
            isDrawingMode: true,
            selectable: false,
            selection: false,
            devicePixelRatio:true, //Retina 高清屏 屏幕支持
          })
          this.fabricObj.freeDrawingBrush.color = this.drawColor
          this.fabricObj.freeDrawingBrush.width = 2
          console.log('this.canvasSize ',this.canvasSize)
          this.fabricObj.setWidth(this.canvasSize)
          this.fabricObj.setHeight(this.canvasSize)
          // this.fabricObj.add(
          //   new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
          //   new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
          //   new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' }),
          // )
          //绑定画板事件
          this.fabricObjID = Math.random().toString(36).substr(2,5) +  Date.now().toString(36).substr(4,10);
          this.fabricObjAddEvent(this.fabricObjID)
          console.log('this.fabricObjID',this.fabricObjID)
          
          if (this.fabricHistoryJson && this.fabricHistoryJson.length) {
            this.showData(this.fabricHistoryJson[this.fabricHistoryJson.length - 1])
          }
        },500)
      },
      //时间监听
      fabricObjAddEvent(fabricObjID) {
        this.fabricObj.on({
          'mouse:down': (o)=> {
            if (fabricObjID != this.fabricObjID) {
              return
            }
            this.mouseFrom.x = o.pointer.x;
            this.mouseFrom.y = o.pointer.y;
            this.doDrawing = true;
            if(this.currentTool=='text') {
              this.drawText()
            }        
          },
          'mouse:up': (o)=> {
            if (fabricObjID != this.fabricObjID) {
              return
            }
            // if(isDragStartCallback){
            //   return
            // }
            this.mouseTo.x = o.pointer.x;
            this.mouseTo.y = o.pointer.y;
            this.drawingObject = null;
            this.moveCount = 1;
            this.doDrawing = false;
            this.updateModifications(true);
          },
          'mouse:move': (o)=> {
            if (fabricObjID != this.fabricObjID) {
              return
            }
            // if(isDragStartCallback){
            //   return
            // }
            if (this.moveCount % 2 && !this.doDrawing) {
              //减少绘制频率
              return
            }
            this.moveCount++;
            this.mouseTo.x = o.pointer.x;
            this.mouseTo.y = o.pointer.y;
            this.drawing();
          },
          //对象移动时间
          'object:moving': (e)=> {
            if (fabricObjID != this.fabricObjID) {
              return
            }
            // if(isDragStartCallback){
            //   return
            // }
            e.target.opacity = 0.5;
          },
          //增加对象
          'object:added': ()=>{
            if (fabricObjID != this.fabricObjID) {
              return
            }
            // if(isDragStartCallback){
            //   return
            // }
            // debugger
          },
          'object:modified':(e)=> {
            if (fabricObjID != this.fabricObjID) {
              return
            }
            // if(isDragStartCallback){
            //   return
            // }
            e.target.opacity = 1;
            // let object = e.target;
            this.updateModifications(true)
          },
          'selection:created': (e)=>{
            if (fabricObjID != this.fabricObjID) {
              return
            }
            // if(isDragStartCallback){
            //   return
            // }
            // console.log(' --- 123 --- ',e,e.selected)
            if (this.isType == 'remove') {
              if (e.selected) {
                //多选删除
                var etCount = e.selected.length;
                for (var etindex = 0; etindex < etCount; etindex++) {
                  this.fabricObj.remove(e.selected[etindex]);
                }
              } else {
                //单选删除
                this.fabricObj.remove(e.target);
              }
              this.fabricObj.discardActiveObject(); //清楚选中框
              this.updateModifications(true) 
            }
            
          },
        });
      },
      //储存历史记录
      updateModifications(savehistory) {
        if(savehistory==true) {
          this.fabricHistoryJson.push(JSON.stringify(this.fabricObj))
          // this.attributesContent = this.fabricObj
          // console.log(' 当前数据 ',this.fabricHistoryJson)
        }
      },
      //canvas 历史后退
      undo() {
        let state = this.fabricHistoryJson
        if(this.mods < state.length) {
          this.fabricObj.clear().renderAll();
          this.fabricObj.loadFromJSON(state[state.length - 1 - this.mods - 1]);
          this.fabricObj.renderAll();
          this.mods += 1;
        }
      },
      //显示历史的东西
      showData(jsonData) {
        // let state = this.fabricHistoryJson
        this.fabricObj.clear().renderAll();
        this.fabricObj.loadFromJSON(jsonData);
        this.fabricHistoryJson = [jsonData]
        this.fabricObj.renderAll();
        this.mods += 1;
      },
      // 旋转
      xuanZhuan(){
      },
      //前进
      redo() {
        let state = this.fabricHistoryJson
        if (this.mods > 0) {
          this.fabricObj.clear().renderAll();
          this.fabricObj.loadFromJSON(state[state.length - 1 - this.mods + 1]);
          this.fabricObj.renderAll();
          this.mods -= 1;
        }
      },
      transformMouse(mouseX, mouseY) {
        return { x: mouseX / this.zoom, y: mouseY / this.zoom };
      },
      resetObj() {
        this.fabricObj.selectable = false
        this.fabricObj.selection = false
        this.fabricObj.skipTargetFind = true
        //清除文字对象
        if(this.textboxObj) {
          this.textboxObj.exitEditing();
          this.textboxObj = null;
        }
      },
      handleTools(tools, idx) {
        this.initIdx = idx;
        this.currentTool = tools.name;
        this.fabricObj.isDrawingMode = false;
        this.resetObj()
        switch(tools.name) {
          case 'pencil':
            this.fabricObj.isDrawingMode = true;
            break;
          case 'remove':
            this.isType = 'remove'
            this.fabricObj.selection = true
            this.fabricObj.skipTargetFind = false
            this.fabricObj.selectable = true
            break;
          case "xuanZhuan": //旋转
            this.isType = 'xuanZhuan'
            this.fabricObj.selection = true
            this.fabricObj.skipTargetFind = false
            this.fabricObj.selectable = true
            break;
          case 'reset':
            this.fabricObj.clear();
            break;
          case 'redo':
            this.redo();
            break;
          case 'undo':
            this.undo();
            break;     
          default:
            break; 
        }
      },
      //绘制文字对象
      drawText() {
        this.textboxObj = new fabric.Textbox(" ", {
          left: this.mouseFrom.x,
          top: this.mouseFrom.y,
          width: 220,
          fontSize: 18,
          fill: this.drawColor,
          hasControls: true
        });
        this.fabricObj.add(this.textboxObj);
        this.textboxObj.enterEditing();
        this.textboxObj.hiddenTextarea.focus();
        this.updateModifications(true)
      },
      drawing() {
        if(this.drawingObject) {
          this.fabricObj.remove(this.drawingObject)
        }
        let fabricObject = null
        switch (this.currentTool) {
          // 铅笔
          case 'pencil':
            this.fabricObj.isDrawingMode = true
            break;
          case 'line':
            fabricObject = new fabric.Line([this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y],{
              stroke: this.drawColor,
              strokeWidth: this.drawWidth
            }) 
            break;
          case 'arrow':
            fabricObject = new fabric.Path(this.drawArrow(this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y, 15.5, 15.5), {
              stroke: this.drawColor,
              fill: "rgba(255,255,255,0)",
              strokeWidth: this.drawWidth
            });
            break;
          case 'dashedline': 
            // doshed line
            fabricObject = this.drawDoshedLine()
            break;
          case 'rectangle': 
            // 矩形
            fabricObject = this.drawRectangle()
            break;
          case "circle": //正圆
            fabricObject = this.drawCircle()
            break;
          case "ellipse": 
            // 椭圆
            fabricObject = this.drawEllipse()
            break;
          case "equilateral": //等边三角形
            fabricObject = this.drawTriangle()
            break;
          case "xuanZhuan": //旋转
            break;
          case 'remove':
            break;   
          default:
            // statements_def'
            break;
        }
        if(fabricObject) {
          this.$nextTick(() => {
            this.fabricObj.add(fabricObject)
            this.drawingObject = fabricObject
          })
        }
      },
      // dashed line
      drawDoshedLine() {
        return new fabric.Line([this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y],{
          strokeDashArray: [10, 3],
          stroke: this.drawColor,
          strokeWidth: this.drawWidth
        })
      },
      // circle //正圆
      drawCircle() {
        let radius = Math.sqrt((this.mouseTo.x - this.mouseFrom.x) * (this.mouseTo.x - this.mouseFrom.x) + (this.mouseTo.y - this.mouseFrom.y) * (this.mouseTo.y - this.mouseFrom.y)) / 2;
         return new fabric.Circle({
          left: this.mouseFrom.x,
          top: this.mouseFrom.y,
          stroke: this.drawColor,
          fill: "rgba(255, 255, 255, 0)",
          radius: radius,
          strokeWidth: this.drawWidth
        });
      },
      // triangle 三角形 
      drawTriangle() {
        let height = this.mouseTo.y - this.mouseFrom.y
        return new fabric.Triangle({
          top: this.mouseFrom.y,
          left: this.mouseFrom.x,
          width: Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2.0, 2)),
          height: height,
          stroke: this.drawColor,
          strokeWidth: this.drawWidth,
          fill: "rgba(255,255,255,0)"
        });
      },
      // ellipse椭圆
      drawEllipse() {
        let left = this.mouseFrom.x
        let top = this.mouseFrom.y
        // let ellipse = Math.sqrt((this.mouseTo.x - left) * (this.mouseTo.x - left) + (this.mouseTo.y - top) * (this.mouseTo.y - top)) / 2;
        return new fabric.Ellipse({
          left: left,
          top: top,
          stroke: this.drawColor,
          fill: "rgba(255, 255, 255, 0)",
          originX: "center",
          originY: "center",
          rx: Math.abs(left - this.mouseTo.x),
          ry: Math.abs(top - this.mouseTo.y),
          strokeWidth: this.drawWidth
        });
      },
      // rectangle 绘制矩形
      drawRectangle() {
        return new fabric.Rect({
          left: this.mouseFrom.x,
          top: this.mouseFrom.y,
          width: this.mouseTo.x - this.mouseFrom.x,
          height: this.mouseTo.y - this.mouseFrom.y,
          fill: "rgba(255, 255, 255, 0)",
          stroke: this.drawColor,
          strokeWidth: this.drawWidth
        });
      },
      //书写箭头的方法
      drawArrow(fromX, fromY, toX, toY, theta, headlen) {
        theta = typeof theta != "undefined" ? theta : 30;
        headlen = typeof theta != "undefined" ? headlen : 10;
        // 计算各角度和对应的P2,P3坐标
        let angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
          angle1 = (angle + theta) * Math.PI / 180,
          angle2 = (angle - theta) * Math.PI / 180,
          topX = headlen * Math.cos(angle1),
          topY = headlen * Math.sin(angle1),
          botX = headlen * Math.cos(angle2),
          botY = headlen * Math.sin(angle2);
        let arrowX = fromX - topX,
          arrowY = fromY - topY;
        let path = " M " + fromX + " " + fromY;
        path += " L " + toX + " " + toY;
        arrowX = toX + topX;
        arrowY = toY + topY;
        path += " M " + arrowX + " " + arrowY;
        path += " L " + toX + " " + toY;
        arrowX = toX + botX;
        arrowY = toY + botY;
        path += " L " + arrowX + " " + arrowY;
        return path;
      },
      downLoadImage() {
        this.done = true
        //生成双倍像素比的图片
        let base64URl = this.fabricObj.toDataURL({
          formart: 'png',
          multiplier: 2
        })
        this.imageBase64 = base64URl
        this.done = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .draggable-resizable{
    height: 800px;
  }
  .canvasBtn{
    padding:  0px 10px;
    // height: 46px;
    text-align: center;
    line-height: 46px;
    font-size: 16px;
    font-weight: 600;
  }
  .canvasBox{
    width: auto;
    height: 1000px;
    position: relative;
    overflow: hidden;
  }
  .canvas-wraper{
    z-index: 5;
    position: relative;
  }
  .ifShow::before{
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    // transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    background-color: rgba(160, 160, 160,.5);
    z-index: 10000000000000;
  }

  .wraper{
    position: relative;
    padding-top: 30px;
    width: 100%;
    height: 100%;
    .canvas-wraper{
      border: #dad7d9 solid 5px ;
      margin: 10px;
      height: calc(100% - 20px) ;
      width: auto;
      margin-bottom: 10px;
      overflow: hidden;
      background: url('../assets/001.jpg') repeat;
    }
    .controlPanel{
      position: fixed;
      bottom: 10px;
      right: 10px;
      z-index: 10000;
      // height: 50px;
      max-width: calc(100% - 20px) ;
      // height: 62px;
      background: #ddd;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
      .contro-item{
        // flex-basis: 100px;
        border-right: 1px solid #dad7d9;
        text-align: center;
        cursor: pointer;
        background: #fefefe;
        i{
          display: inline-block;
          font-size: 38px;
        }
        &.active{
          background: #e34f51;
          color: #fff;
          border-radius: 3px;
          i{
            font-size: 42px;
          }
        }
      }
    }
    .btnDiv{
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: center;
      margin: 20px 0;
      >.pickerDiv{
        margin-left: 10px;
      }
    }
    .download{
      text-align: center;
      margin-top: 200px;
      img{
        width: 100%;
      }
    }
  }
</style>